<template>
    <div class="pdf-viewer">
        <div class="pdfViewer"></div>
        <div class="pdf-viewer__screen"></div>
    </div>
</template>
<script>
import { getDocument } from "pdfjs-dist/lib/pdf";
import { EventBus, PDFViewer, PDFLinkService } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";

export default {
    props: {
        url:[String,Object],
        container: {
            type: [Function, String],
            default(){
                return window
            }
        }
    },
    data(){
        return {
            keyCode: NaN,
            isGraping: false,
            MouseX:0,
            MouseY:0
        }
    },
    async mounted () {
        const scrollContainer = this.getScrollContainer(this.container)
        scrollContainer.addEventListener('scroll', this.onScroll)

        const eventBus = new EventBus()
        const linkService = new PDFLinkService({ eventBus: this.eventBus })
        const viewer = this.$PDFViewer = new PDFViewer({
            container: this.$el,
            eventBus,
            enhanceTextSelection: true,
            removePageBorders: true,
            linkService
        })
        linkService.setViewer(viewer)
        if(this.$getPDFPool){
            this.$pdfPool = this.$getPDFPool()
            this.$pdfPool.addViewer(viewer)
        }
        this.$emit('init', viewer)
        this.getPDFDoc(this.url)

        window.addEventListener('keydown', this.onKeydown)
        window.addEventListener('keyup', this.onKeyup)
        window.addEventListener('mousedown', this.onMouseDown)
        window.addEventListener('mouseup', this.onMouseUp)
        window.addEventListener('mousemove', this.onMouseMove)
    },
    destroyed () {
        if(this.$pdfPool) this.$pdfPool.removeViewer(this.$PDFViewer)
        window.removeEventListener('keydown', this.onKeydown)
        window.removeEventListener('keyup', this.onKeyup)
        window.removeEventListener('mousedown', this.onMouseDown)
        window.removeEventListener('mouseup', this.onMouseUp)
        window.removeEventListener('mousemove', this.onMouseMove)
    },
    methods: {
        onKeydown($event){
            this.keyCode = $event.keyCode
            if(this.keyCode != 32) return
            this.$el.classList.add('pdf-viewer--can-grab')
            $event.preventDefault()
            $event.stopPropagation()
        },
        onKeyup($event){
            if(this.keyCode != 32) return
            this.$el.classList.remove('pdf-viewer--can-grab')
        },
        onMouseDown($event){
            this.MouseX = $event.clientX
            this.MouseY = $event.clientY
            if(this.keyCode != 32) return
            if($event.target.className != 'pdf-viewer__screen') return
            $event.preventDefault()
            $event.stopPropagation()
            this.$el.classList.add('pdf-viewer--grabing')
            this.isGraping = true
        },
        onMouseUp($event){
            // var pageX = document.getElementsByClassName('textLayer')[0].clientWidth
            // var pageY = document.getElementsByClassName('textLayer')[0].clientHeight
            if($event.clientX - this.MouseX !== 0 && $event.clientY - this.MouseY !== 0 ) this.$emit('select',$event) 
            var IconDiv = document.getElementById('Icon') 
            var note = window.getSelection().toString() 
            console.log(note,'****')
            if(!note && IconDiv && ( $event.clientX < IconDiv.getBoundingClientRect().x  || $event.clientX > IconDiv.getBoundingClientRect().x + IconDiv.getBoundingClientRect().width || $event.clientY < IconDiv.getBoundingClientRect().y  || $event.clientY > IconDiv.getBoundingClientRect().y + IconDiv.getBoundingClientRect().height ) ) { 
                console.log('没点中按钮') 
                this.$emit('showIcon',false) 
            } 
            if(this.keyCode != 32) return
            this.$el.classList.remove('pdf-viewer--grabing')
            this.isGraping = false
        },
        onMouseMove($event){
            if(!this.isGraping) return

            this.$scrollContainer.scrollTo(
                this.$scrollContainer.scrollLeft-=$event.movementX,
                this.$scrollContainer.scrollTop-=$event.movementY,
            )
        },
        onScroll($event){ 
            this.$emit('scoll',$event) 
        },
        async getPDFDoc(url){
            let pdfdoc;
            const ownerDocument = this.$el
            if(typeof url === 'string'){
                pdfdoc = await getDocument({ url, ownerDocument }).promise
                this.$emit('loaded', pdfdoc)
            }
            this.$PDFViewer.setDocument(pdfdoc)
            this.$PDFViewer.linkService.setDocument(pdfdoc)
            if(this.$pdfPool) this.$pdfPool.pdfdoc = pdfdoc
        },
        getScrollContainer(val){
            let container = val;
            if(typeof container == "string") container = () => document.querySelector(val)
            this.$scrollContainer = container()
            return this.$scrollContainer
        }
    },
    watch: {
        async url(val){
            this.getPDFDoc(val)
        },
        container(val){
            this.getScrollContainer(val)
        }
    }
}
</script>
<style lang="scss" scoped>
.pdf-viewer{
    position: relative;
    &--can-grab{
        cursor:-webkit-grab;
        .pdf-viewer__screen{
            opacity: 0;
            visibility: visible;
        }
    }
    &--grabing{
        cursor:-webkit-grabbing;
    }
    &__screen{
        position: fixed;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        zoom:1;
        z-index: 998;
        background-color: rgba(0,0,0,.8);
        opacity: 0;
        visibility: hidden;
    }
}
</style>
<style lang="scss">
.textLayer {
  z-index: 2;
  opacity: 1;
  mix-blend-mode: multiply;
  line-height: initial;
  .highlight{
      margin: 0;
      padding: 0;
      border-radius: 0;
      background-color: rgb(252, 243, 160);
      &.selected{
        background-color: rgb(135, 231, 126);
      }
  }
}

.annotationLayer {
  position: absolute;
  top: 0;

  z-index: 3;
}

html
  body
  .textLayer
  > div:not(.PdfHighlighter__highlight-layer):not(.Highlight):not(.Highlight-emoji) {
  opacity: 1;
  mix-blend-mode: multiply;
}

.textLayer ::selection {
  background: rgba(252, 232, 151, 1);
  mix-blend-mode: multiply;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .textLayer {opacity: 0.5;}
}

/* Internet Explorer support method */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .textLayer {opacity: 0.5 }
}

/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-ime-align:auto) {
  .textLayer {opacity: 0.5 }
}

</style>